<template>
    <div v-loading="loading" class="RainInfoBox" element-loading-text="加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.3)">
        <div class="rainInfo_top">
            <div style="margin-bottom:16px">
                <div>
                    <div>
                        <span>站名</span><span>{{ infoRainList.st ? infoRainList.st.stnm : '' || '&nbsp;' }}</span>
                    </div>
                </div>
                <div>
                    <div>
                        <span>行政区划</span><span>{{ infoRainList.st ? infoRainList.st.fulladdvnm : '' || '&nbsp;' }}</span>
                    </div>
                </div>
                <div>
                    <div>
                        <span>站址</span> <span>{{ infoRainList.st ? infoRainList.st.stlc : '' || '&nbsp;' }}</span>
                    </div>
                </div>
                <div>
                    <div>
                        <span>累计雨量</span><span style="font-family:'Number"> {{ infoRainList.maxP || 0 }}mm </span>
                    </div>
                </div>
            </div>
            <div>
                <span style="color: #A5C2D8;font-size:14px;margin-right:10px">时间 </span><span>
                    <el-date-picker v-model="TimeRainDlg" type="datetimerange" start-placeholder="开始日期" range-separator="至"
                        end-placeholder="结束日期" style="width: 80%" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
                        :default-time="[timebeg, timebeg]" @change="selectTime" prefix-icon="el-icon-date" />
                </span>
            </div>

            <div class="rainInfo_top_btn_span">
                <!-- <p style="margin: 0">
          <el-radio-group v-model="rainTimeRadio" class="rainTimeRadio" size="mini" @change="rainTimeRadioChange">
            <el-radio-button v-if="adioBtnSpan == '' && parameter.sttp == 'MM'" label="10">10分钟</el-radio-button>
            <el-radio-button v-if="adioBtnSpan == '' && parameter.sttp == 'MM'" label="30">30分钟</el-radio-button>
            <el-radio-button v-if="adioBtnSpan == ''" label="60">1小时</el-radio-button>
            <el-radio-button v-if="adioBtnSpan == '3'" label="180">3小时</el-radio-button>
            <el-radio-button v-if="adioBtnSpan == '7' || adioBtnSpan == '10'" label="1440">1天</el-radio-button>
          </el-radio-group>
        </p> -->
                <p class="zhadiobtn">
                    <el-radio-group v-model="adioBtnSpan" @change="handleClickRain">
                        <el-radio label="">默认</el-radio>
                        <el-radio label="3">3天</el-radio>
                        <el-radio label="7">7天</el-radio>
                        <el-radio label="10">10天</el-radio>
                    </el-radio-group>
                </p>
            </div>
        </div>
        <div class="rainInfo_center">
            <div class="subtitle">雨量过程图</div>
            <el-row class="tableEchatrsdiv">
                <el-col :span="18" class="tableEchatrsdiv">
                    <div class="grid-content bg-purple">
                        <div class="demoEccharts">
                            <Newecharts id="demo" v-if="chartflg" style="height:100%" :option="ChartTestData" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" class="tableEchatrsdiv listTables">
                    <div class="grid-content bg-purple-light" style="height:100%">
                        <el-table :data="tableData" style="width: 100%;height:100%">
                            <template slot="empty">
                                <img width="84" height="100" src="@/assets/dialog/NoDataicon.png" alt="">
                            </template>
                            <el-table-column prop="tm" align="center" label="时间" />
                            <el-table-column prop="p" align="center" label="时段降雨(mm)" />
                        </el-table>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="subtitle">最大雨量(mm)</div>
                    <div class="rainLimitWrap">
                        <!-- <div class="rainFlag">最大<br>雨量<br>(mm)</div> -->
                        <div class="flagTableDiv">
                            <div>
                                <span v-for="(item, indnx) in listTimeName" :key="indnx" :label="item"
                                    style="border-bottom: 1px solid #4285A6;border-left: 1px solid #4285A6;">{{ item
                                    }}</span>
                            </div>
                            <div>
                                <div v-show="rangeMaxDrp.length"
                                    style="height:100%;border-top: 1px solid #4285A6;border-left: 1px solid #4285A6;"
                                    v-for="(itemChlid, indexC) in rangeMaxDrp" :key="indexC">
                                    <span>{{ itemChlid.p ? itemChlid.p + 'mm' : '&nbsp;' }}</span>
                                    <span class="tag" :class="'mainTextLevel' + itemChlid.rank">{{ itemChlid.mainText ?
                                        itemChlid.mainText : '&nbsp;' }}</span><br>
                                    <span>{{ itemChlid.tm ? itemChlid.tm : '&nbsp;' }}</span>
                                </div>
                                <div v-show="!rangeMaxDrp.length" style="width:100%;text-align:center">
                                    <img src="@/assets/dialog/NoDataicon.png" width="50" height="50">
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div style="margin-top: 44px;">
            <div class="subtitle">重现期雨量情况</div>
            <el-row class="rainLimitTableWrap" :gutter="1">
                <el-col :span="24">
                    <el-table border class="flagTable " :data="reappearDataLeft" size="mini">
                        <template slot="empty">
                            <img width="50" height="50" style="transform: translateY(14px);"
                                src="@/assets/dialog/NoDataicon.png" alt="">
                        </template>
                        <el-table-column align="center" prop="title" label="重现期" />
                        <el-table-column align="center" prop="m60" label="1小时" />
                        <el-table-column align="center" prop="m180" label="3小时" />
                        <el-table-column align="center" prop="m360" label="6小时" />
                        <el-table-column align="center" prop="m1440" label="24小时" />
                        <el-table-column align="center" prop="title_1" label="重现期" />
                        <el-table-column align="center" prop="m60_1" label="1小时" />
                        <el-table-column align="center" prop="m180_1" label="3小时" />
                        <el-table-column align="center" prop="m360_1" label="6小时" />
                        <el-table-column align="center" prop="m1440_1" label="24小时" />
                    </el-table>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import Newecharts from './newecharts.vue'
import * as echarts from 'echarts'
import {
    GetRainInfo
} from '@/api/xuna.js'
import moment from 'moment'
export default {
    components: {
        Newecharts
    },
    props: ['selectnum'],
    data() {
        return {
            rainTimeRadio: '60', // 累计雨量参数 选择时间 1小时 3小时 一天
            TimeRainDlg: '',
            parameter: '',
            TimeRain: '',
            adioBtnSpan: '',
            timebeg: this.$moment().format('HH:mm:ss'),
            tableData: [],
            infoRainList: {
                st: {
                    stnm: '',
                    stlc: '',
                    fulladdvnm: '',
                    MaxP: '0'
                }
            },
            rangeMaxDrp: [],
            listTimeName: ['1小时', '3小时', '6小时', '24小时'],
            reappearDataLeft: [],
            ChartTestData: {},
            loading: false,
            timeIntervalRainData: [], // 时段降雨数据
            chartflg: true,
            originalDate:[],

        }
    },
    created() {
        const getRainParmas = this.$store.getters.dlgParams.params
        this.parameter = getRainParmas
        this.TimeRainDlg = [this.parameter.strBegin || this.parameter.rainStart || '', this.parameter.strEnd || this.parameter.rainEnd || '']
        this.originalDate = [this.parameter.strBegin || this.parameter.rainStart || '', this.parameter.strEnd || this.parameter.rainEnd || '']
        console.log(this.parameter)
        this.getData()
    },
    methods: {
        handleRisz() {
            if (!this.loading) {//判断是否请求完数据
                //    this.ChartTestData =  this.ChartTestData;
                this.chartflg = false;
                this.$nextTick(() => {
                    this.chartflg = true;
                });
            };
        },
        handleClickRain(val) {
            this.adioBtnSpan = val
            if (val !== '') {
                let endtime = this.parameter.strEnd || this.parameter.rainEnd;
                const timeT = this.$moment(endtime).subtract(val, 'day').format('YYYY-MM-DD HH:mm')
               // this.parameter.strBegin = timeT
                // this.selectTime([timeT, this.parameter.strEnd]);
                this.selectTime([timeT, endtime || this.TimeRainDlg[1]])
            } else {
                this.TimeRainDlg =this.originalDate;
                this.parameter.strBegin = this.TimeRainDlg[0];
                this.getData()
            }
        },
        // 自定义时间
        selectTime(val) {
            // console.log(val)
            if (val) {
                this.parameter.strBegin = val[0]
                this.parameter.strEnd = val[1]
                this.TimeRainDlg = val
                this.getData()
            } else {
                this.parameter.strBegin = ''
                this.parameter.strEnd = ''
            }
        },
        // 根据快速选择时间判断显示值
        rainTimeRadioChange() {
            this.getDrpByStcd() // 刷新echart图表
            this.getMaxDrpByIntvList() // 刷新最大雨量表格
        },
        // 获取参数
        getData() {
            this.loading = true
            const param = {
                dtBegin: this.parameter.strBegin || this.parameter.rainStart || '2021-06-08',
                dtEnd: this.parameter.strEnd || this.parameter.rainEnd || '2021-06-11',
                Stcd: this.parameter.stcd || this.parameter.Stcd || '41135890',
                Step: this.parameter.Step || '60'
            }
            GetRainInfo(param).then((res) => {
                this.loading = false;

                if (res.isSuccess) {
                    this.infoRainList = res.data
                    console.log('res.data: ', res.data);
                    this.tableData = [...res.data.lstRv].map(function (v) {
                        return {
                            p: v.p,
                            // tm: v.tm.replace(/T/g, ' ')
                            tm: moment(v.tm).format('YYYY-MM-DD HH:mm')
                        }
                    })
                    this.rangeMaxDrp = [...res.data.rangeMaxDrp].map(function (v) {
                        return {
                            ...v,
                            tm: moment(v.tm).format('YYYY-MM-DD HH:mm')
                        }
                    })

                    const arrData = [{
                        title: '5年一遇',
                        title_1: '50年一遇'
                    },
                    {
                        title: '10年一遇',
                        title_1: '100年一遇'
                    },
                    {
                        title: '20年一遇',
                        title_1: '历史最大值'
                    }
                    ]
                    res.data.lstDr.forEach(function (v, i) {
                        const key = 'm' + v.intv
                        arrData[0][key] = v.five != null ? Math.round(v.five, 1) + 'mm' : ''
                        arrData[1][key] = v.ten != null ? Math.round(v.ten, 1) + 'mm' : ''
                        arrData[2][key] = v.twenty != null ? Math.round(v.twenty, 1) + 'mm' : ''
                        arrData[0][key + '_1'] = v.fifty != null ? Math.round(v.fifty, 1) + 'mm' : ''
                        arrData[1][key + '_1'] = v.hundred != null ? Math.round(v.hundred, 1) + 'mm' : ''
                        arrData[2][key + '_1'] = v.maxP ? Math.round(v.maxP, 0) + 'mm' : '/'
                        arrData[2]['mxtm'] = v.mxtm ? '(' + moment(v.mxtm).format('yyyyMMdd') + ')'
                            : ''
                    })
                    this.reappearDataLeft = arrData.filter((item, index) => index != 2)  //只展示俩
                    this.getRainEchart(res.data.lstRv, this.adioBtnSpan)
                }
            }).catch(err => {
                this.loading = false
            })
        },

        getRainEchart(list, adioBtnSpan) {
            const lst = list
            const ljData = []
            const jyData = []
            const xData = []
            var jyMax = 0
            let oldxdt = ''
            lst.map((v, index) => {
                jyData.push(v.p)
                ljData.push(v.sumDrp)
                xData.push(v.tm.replace(/T/g, ' '))
            })
            if (jyData.length > 0) {
                jyMax = Math.max(...jyData);
            }
            this.ChartTestData = {

                tooltip: {
                    backgroundColor: 'rgba(2, 0, 31,0.65)',
                    borderColor: '#333',
                    trigger: 'axis',
                    axisPointer: {
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    textStyle: {
                        color: '#fff'
                    }
                },
                // title: {
                //     margin: 0,
                //     verticalAlign: 'top',
                //     useHTML: true,
                //     text: list.length > 0 ? '雨量过程图' : '无数据',
                //     x: list.length > 0 ? 20 : 'center',
                //     y: list.length > 0 ? 0 : 'center',
                //     textStyle: {
                //         color: '#fff',
                //         fontSize: '12px'
                //     }
                // },
                grid: {
                    x: 55,
                    y: 55,
                    x2: 45,
                    y2: 35
                },
                legend: {
                    // x2: 95,
                    // y: 10,
                    data: ['雨量(mm)', '累计雨量(mm)'],
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                },
                xAxis: {
                    interval: 0, // 步长
                    type: 'category',
                    data: xData,
                    axisPointer: {
                        type: 'shadow'
                    },
                    minInterval: 3600 * 1.5 * 1000,
                    axisLabel: {
                        textStyle: {
                            color: function (value, index) {
                                // 判断是否是日 用特殊字体颜色
                                if (value != undefined && value != '' && value != null) {
                                    if (index == 0) {
                                        return '#fff'
                                    } else if (index > 0) {
                                        if (
                                            xData[index - 1].split(' ')[0].split('-')[2] !==
                                            xData[index].split(' ')[0].split('-')[2]
                                        ) {
                                            return '#fff'
                                        } else {
                                            return '#ddd'
                                        }
                                    }
                                }
                            }
                        },
                        fontSize: 11,
                        // interval: 0, // 步长
                        formatter: function (value, index) {
                            if (value != undefined && value != '' && value != null) {
                                if (index > 0) {
                                    // if (adioBtnSpan >= 3) {
                                    //     const timeDay = xData[index].split(' ')[1]
                                    //    // console.log(timeDay);
                                    //    // console.log(index)
                                    //      return moment(xData[index]).format('DD日 HH:mm')//2023-7-3

                                    // if (timeDay == '18:00:00' || timeDay == '06:00:00' || timeDay == '12:00:00') {
                                    //     return moment(xData[index]).format('HH:mm')
                                    // } else if (xData[index - 1].split(' ')[0].split('-')[2] != xData[index].split(' ')[0].split('-')[2]) {

                                    //     return moment(xData[index]).format('DD日')
                                    // } else {
                                    //     return ''
                                    // }
                                    // } else {
                                    if (index > 1) {
                                        if (moment(xData[index]).format('DD日') != oldxdt) {
                                            oldxdt = moment(xData[index]).format('DD日')

                                            return moment(xData[index]).format('DD日')
                                        } else {
                                            oldxdt = moment(xData[index]).format('DD日')
                                            return moment(xData[index]).format('HH:mm')
                                        }
                                        // if (((xData.length - 1) / 24) > 2 && ((xData.length - 1) / 24) <
                                        // 		5) {
                                        //       if(moment(xData[index]).format('DD日')!=oldxdt){
                                        //              oldxdt = moment(xData[index]).format('DD日');

                                        //          return moment(xData[index]).format('DD日')
                                        //        }else{
                                        //               oldxdt = moment(xData[index]).format('DD日');
                                        //             return moment(xData[index]).format('HH:mm')
                                        //        }
                                        //     if (index % 8 == 0) {
                                        //         if (xData[index - 1].split(' ')[0].split('-')[2] != xData[
                                        //             index].split(' ')[0]
                                        //             .split(
                                        //                 '-')[2]) {
                                        //             return moment(xData[index]).format('DD日')
                                        //         } else {
                                        //             return moment(xData[index]).format('hh:mm') // 去掉时
                                        //         }
                                        //     } else {
                                        //      //  console.log(xData[index])
                                        //       return moment(xData[index]).format('DD日')
                                        //     }
                                        // } else if (((xData.length - 1) / 24) >= 5) {
                                        //     if (index % 4 == 0) {
                                        //         if (xData[index - 1].split(' ')[0].split('-')[2] != xData[
                                        //             index].split(' ')[0]
                                        //             .split(
                                        //                 '-')[2]) {
                                        //             return moment(xData[index]).format('DD日')
                                        //         } else {
                                        //             return moment(xData[index]).format('DD日')
                                        //         }
                                        //     } else {
                                        //         return moment(xData[index]).format('hh:mm')
                                        //     }
                                        // } else {
                                        //     if (index % 4 == 0 || xData.length < 12) {
                                        //         // 4的倍数
                                        //         if (
                                        //             xData[index - 1].split(' ')[0].split('-')[2] ==
                                        // 				xData[index].split(' ')[0].split('-')[2]
                                        //         ) {
                                        //             // 如果前后相等 则是同一天
                                        //             if (xData[index].split(' ')[1] == '01:00') {
                                        //                 return ''
                                        //             } else {
                                        //                 return xData[index].split(' ')[1].split(':')[
                                        //                     0] // 去掉时
                                        //             }
                                        //         } else {
                                        //             // 如果前后不相等 则不是同一天
                                        //             return moment(xData[index]).format('DD日')
                                        //         }
                                        //     } else {
                                        //         if (
                                        //             xData[index - 1].split(' ')[0].split('-')[2] !==
                                        // 				xData[index].split(' ')[0].split('-')[2]
                                        //         ) {
                                        //             return moment(xData[index]).format('DD日')
                                        //         }
                                        //         return moment(xData[index]).format('hh:mm')
                                        //     }
                                        // }
                                    } else {
                                        oldxdt = moment(xData[index]).format('DD日')
                                        return moment(xData[index]).format('HH:mm')
                                    }
                                    // }
                                } else {
                                    oldxdt = moment(xData[index]).format('DD日')
                                    const dateRetuen = moment(value).format('HH:mm') + '\n' + moment(value)
                                        .format('YYYY-MM-DD')
                                    return dateRetuen
                                }
                            } else {
                                return ''
                            }
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    name: '雨量mm',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#009bd5'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#99999959'],
                            width: 1,
                            type: 'dashed'
                        }
                    },

                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: 'red'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}'
                    },
                    labels: {
                        align: 'left',
                        x: -8,
                        y: 5,
                        style: {
                            color: '#009bd5'
                        }
                    },
                    min: 0,
                    max: jyMax
                },
                {
                    type: 'value',
                    name: '累计雨量mm',
                    nameTextStyle: {
                        color: '#fff'
                    },
                    axisLine: {
                        show: true
                    },
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['rgba(0,0,0,.2)'],
                            width: 1,
                            type: 'dashed'
                        }
                    },
                    labels: {
                        align: 'right',
                        x: -8,
                        y: 5,
                        style: {
                            color: '#bb00ff'
                        }
                    },
                    min: 0,
                    max: ljData[ljData.length - 1]
                }
                ],
                series: [{
                    name: '雨量(mm)',
                    type: 'bar',
                    color: '#009bd5',
                    barCategoryGap: '0%',
                    barWidth: '90%',
                    itemStyle: {
                        normal: {
                            // 渐变了
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#00E4FF' },
                                { offset: 1, color: '#0039BB' }
                            ])
                        }
                    },
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + 'mm'
                        }
                    },
                    data: jyData
                },

                {
                    name: '累计雨量(mm)',
                    type: 'line',
                    color: '#dcef4e',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value + 'mm'
                        }
                    },
                    data: ljData
                }
                ]
            }
        },
        xAxisFormatterFn(thisData) { // thisData当前x轴的刻度值
            console.log(thisData)
            if (thisData.isFirst) { // 格式化x轴时间格式
                if (thisData.axis.dataMin == thisData.value) {
                    if (moment(thisData.value).format('hh:mm') == '00:00') {
                        return '<span style="color:#2727d4">' + moment(thisData.value).format('dd日') + '</span>'
                    } else {
                        return '<span style="color:#2727d4">' + moment(thisData.value).format('M月D日 hh:mm') + '</span>'
                    }
                } else {
                    if (moment(thisData.axis.dataMin).format('hh:mm') == '00:00') {
                        return '<span style="color:#2727d4;margin-right:5px;">' + moment(thisData.axis.dataMin).format(
                            'dd日') + '</span>' + '<span style="color:#2727d4">' + moment(thisData.value).format(
                                'dd日') + '</span>'
                    } else {
                        return '<span style="color:#2727d4;margin-right:5px;">' + moment(thisData.axis.dataMin).format(
                            'M月D日 hh:mm') + '</span>' + moment(thisData.value).format('hh')
                    }
                }
            } else {
                if (moment(thisData.value).format('hh:mm') == '00:00') {
                    return '<span style="color:#2727d4">' + moment(thisData.value).format('dd日') + '</span>'
                } else {
                    return moment(thisData.value).format('hh')
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
.RainInfoBox {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;


}

.rainInfo_top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;

    &>:nth-child(1) {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        background: rgba(0, 165, 233, 0.3);
        padding: 10px 0;
        font-size: 14px;

        >div {
            box-sizing: border-box;
            flex: 1;
            color: #fff;
            border-left: 1px solid #4285A6;
            padding-left: 10px;

            >div {
                background: url(../../assets/newimg/矩形.png) no-repeat left center;
                background-size: auto 66%;

                &>:nth-child(1) {
                    color: #A5C2D8;
                    margin-bottom: 4px;
                }

                span {
                    color: #fff;
                    display: block;
                    text-indent: 14px;
                }
            }
        }

        &>:nth-child(1) {
            border: none;
        }
    }

    >div:nth-child(2) {
        width: 31%;
    }

    >div:nth-child(3) {
        width: 40%;
        text-indent: 30px;
        text-align: left;
    }

    .rainInfo_top_btn_span {
        span {
            background-color: #102065;
            color: #fff;
            border-color: #1e2f74;
        }
    }
}

.rainInfo_center {
    height: auto;
    max-height: 390px;
    // padding-bottom: 10px;

    .demoEccharts {
        height: 240px;
    }

    .tableEchatrsdiv {
        height: 240px;
    }

    .tableEchatrs {
        height: 100% !important;
    }
}

.rainFlag {
    width: 70px;
    height: 70px;
    background: #0E5185;
    border-right: 0;
    color: #fff;
    font-size: 14px;
    margin-right: 1px;
    padding-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/deep/ .rainLimitWrap {
    display: flex;
    // height: 80px;
}

/deep/ .rainLimitWrap .el-col:nth-child(1) {
    width: 27px;
    margin-left: 10px;
}

.flagTable /deep/ {
    height: 110px;

}

.flagTable /deep/ .has-gutter {
    color: #21DDFF !important;
}

/deep/ .villageWrap .el-table__footer tr .cell,
/deep/ .rainLimitTableWrap .flagTable .el-table__body tr .cell {
    height: 15px;
    line-height: 15px;
}

.flagTable /deep/ .el-table .el-table__header-wrapper {
    margin: 0 !important;
}

/deep/ .el-table {
    border: 0 !important;
}

.rainLimitWrap .flagTable {
    display: inline-block;
}

.flagTableDiv {
    width: 100%;
    height: 90px;
    overflow: hidden;
    border-right: 0;
    color: #fff;
    font-size: 14px;
    border: 1px solid #4285A6;

    >div {
        display: flex;
        justify-content: space-between;
        align-items: center;

	/deep/ .rainLimitWrap {
		display: flex;
        // height: 80px;
	}
	/deep/ .rainLimitWrap .el-col:nth-child(1) {
		width: 27px;
		margin-left: 10px;
	}
    .flagTable /deep/{
      //height: 110px;
   
    }
    .flagTable /deep/ .has-gutter{
        color: #21DDFF !important;
      }
	/deep/ .villageWrap .el-table__footer tr .cell,
	/deep/ .rainLimitTableWrap .flagTable .el-table__body tr .cell {
		height: 15px;
		line-height: 15px;
	}
    .flagTable /deep/ .el-table .el-table__header-wrapper{
        margin: 0 !important;
    }
	/deep/ .el-table {
	  border:0 !important;
	}
	.rainLimitWrap .flagTable {
		display: inline-block;
	}

        &:nth-child(1) {
            color: #21DDFF;
            height: 35px;
            line-height: 35px;
            background-color: rgba(0, 150, 255, 0.3);
            ;
        }

        &:nth-child(2) {
            height: 60px;
            line-height: 27px;
            background: rgba(0, 100, 178, 0.05);

            .tag {
                border-radius: 4px;
                padding: 1px 12px;
                letter-spacing: 2px;
            }
        }

        >span,
        >div {
            display: inline-block;
            width: 25%;
            text-align: center;

            >span {
                color: #fff;
                padding: 1px;
                margin: 0 5px;
            }
        }
    }
}

.rainLimitTableWrap /deep/.el-table--border .el-table__cell {
    border-left: 1px solid #4285A6 !important;
}

.rainLimitTableWrap /deep/ .el-table__header-wrapper {
    margin-bottom: 0 !important;
    border-right: 1px solid #4285A6;
    border-top: 1px solid #4285A6;
}

.rainLimitTableWrap /deep/ .el-table__body-wrapper {
    border-right: 1px solid #4285A6;
}

.rainLimitTableWrap /deep/ .el-table tr .el-table__cell {
    border-bottom: 1px solid #4285A6 !important;
}

.rainLimitTableWrap /deep/ .el-table tbody tr {
    background: transparent !important;
}

.rainLimitTableWrap /deep/ .el-table__row>:nth-child(1),
.rainLimitTableWrap /deep/ .el-table__row>:nth-child(6) {
    background: rgba(0, 150, 255, 0.3) !important;
}

.rainLimitTableWrap /deep/ .el-table--border .el-table__cell,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-color: transparent;
}

.mainTextLevel1 {
    background: #09a847;
}

.mainTextLevel2 {
    background: #0269ba;
}

.mainTextLevel3 {
    background: #CBCB1E;
}

.mainTextLevel4 {
    background: #febc1f;
}

.mainTextLevel5 {
    background: #fc2229;
}

.mainTextLevel6 {
    background: #6e339d;
}

.el-table--border::after {
    background-color: #14275b;
}

/deep/.zhadiobtn {
    .el-radio {
        display: inline-block;
    }

}

/deep/ tr .el-table__cell {
    border-top: none !important;
}

.listTables /deep/ .el-table .el-table__body-wrapper {
    height: calc(100% - 38px);
}

.listTables /deep/ .el-table tbody tr {
    background: rgba(0, 150, 255, 0.3);
}

/deep/ .el-date-editor {
    border: solid 1px #1E73DC;
}

/*行间隙*/
.listTables /deep/ .el-table__body {
    -webkit-border-vertical-spacing: 7px; // 垂直间距
}
</style>
<style lang="less" >
.listTables {
    .el-table {
        th {
            .cell {
                color: #fff;
            }
        }
    }

}

.bg-purple-light /deep/ {
    background: #001944;
    padding: 8px 8px 0;

    .el-table__row {
        margin-bottom: 6px !important;
    }
}

/deep/.el-table .el-table__header-wrapper {
    background: red !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.subtitle {
    height: 28px;
    line-height: 0px;
    margin: 20px 0 4px 0;
    text-indent: 4px;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #FFFFFF;
    background: url(../../assets/dialog/dialogBT.png) no-repeat center;
    background-size: 100% 100%;
}

.rainLimitTableWrap /deep/ .el-table__empty-text {
    line-height: 0px;

}</style>

